import React, { useEffect, useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme, Button, Switch, Table, Input } from 'antd';
import axios from 'axios'



const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
//寻找对应label
const findLabelByKey = (items, targetKey) => {
    for (const item of items) {
        if (item.key === targetKey) {
            return item.label;
        }
        if (item.children) {
            const result = findLabelByKey(item.children, targetKey);
            if (result) return result;
        }
    }
    return null;
};

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        // rowScope: 'row',
        render: (_, __, index) => <span style={{
            display: "inline-block", width: "25px", height: "25px", borderRadius: "5px", border: "1px solid #ccc", textAlign: "center",

        }}>{index + 1}</span>,
    },
    {
        title: '商品名称',
        dataIndex: 'proname',
        render: (proname) => <p style={{ display: "flex", flexWrap: "wrap", width: "280px" }}>{proname}</p>,

    },
    {
        title: '商品图片',
        dataIndex: 'img1',
        render: (img1) => <img src={img1} alt="" style={{ width: "70px", height: "70px", margin: "0 20px" }} />,
    },
    {
        title: '商品分类',
        dataIndex: 'category',
        render: (category) => <div >{category}</div>,
        filters: [
            {
                text: "分类",
                value: "分类",
            },],

    },
    {
        title: '商品价格',
        dataIndex: 'originprice',
        render: (price) => <div>{price}</div>,
        sorter: (a, b) => a.originprice - b.originprice,
    },
    {
        title: '商品折扣',
        dataIndex: 'discount',
        sorter: (a, b) => a.discount - b.discount,
    },
    {
        title: '是否推荐',
        dataIndex: 'isrecommend',
        render: (is) => <Switch checked={is} style={{ margin: "0 30px" }} />
    },
    {
        title: '是否售卖',
        dataIndex: 'issale',
        render: (is) => <Switch checked={is} style={{ margin: "0 30px" }} />
    },
    {
        title: '是否秒杀',
        dataIndex: 'isseckill',
        render: (is) => <Switch checked={is} style={{ margin: "0 30px" }} />
    },
];

const items = [
    getItem('系统首页', '1', <PieChartOutlined />),
    getItem('账号管理', 'sub1', <DesktopOutlined />, [
        getItem('用户管理', 'sub1_1', <UserOutlined />),
        getItem('管理员管理', 'sub1_2', <UserOutlined />),
    ]),
    getItem('轮播图管理', 'sub2', <UserOutlined />, [
        getItem('Tom', 'sub2_1', <UserOutlined />),
        getItem('Bill', 'sub2_2', <UserOutlined />),
        getItem('Alex', 'sub2_3', <UserOutlined />),
    ]),
    getItem('商品管理', 'sub3', <TeamOutlined />, [
        getItem('商品列表', 'sub3_1', <UserOutlined />),
        getItem('推荐列表', 'sub3_2', <UserOutlined />)]),
    getItem('数据可视化', 'sub4', <UserOutlined />, [
        getItem('用户管理', 'sub4_1', <UserOutlined />),
        getItem('管理员管理', 'sub4_2', <UserOutlined />),
    ]),
    getItem('编辑器管理', 'sub5', <UserOutlined />, [
        getItem('用户管理', 'sub5_1', <UserOutlined />),
        getItem('管理员管理', 'sub5_2', <UserOutlined />),
    ]),
    getItem('文件管理', 'sub6', <UserOutlined />, [
        getItem('用户管理', 'sub6_1', <UserOutlined />),
        getItem('管理员管理', 'sub6_2', <UserOutlined />),
    ]),
    getItem('地图管理', 'sub7', <UserOutlined />, [
        getItem('用户管理', 'sub7_1', <UserOutlined />),
        getItem('管理员管理', 'sub7_2', <UserOutlined />),
    ]),
];
const Home = () => {
    // const [position, setPosition] = useState('bottom');
    // const [align, setAlign] = useState('end');
    const [proList, setProList] = useState([])
    // 侧边栏折叠状态
    const [collapsed, setCollapsed] = useState(false);
    // 主题色块
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    //记录当前路径
    const [breadcrumbItems, setBreadcrumbItems] = useState([]);
    //axios获取商品数组
    useEffect(() => {
        axios.get("http://121.89.205.189:3000/api/pro/list").then(res => {
            console.log(res.data.data);
            setProList([...res.data.data, ...res.data.data, ...res.data.data])
        })
    }, [])

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 侧边栏 */}

            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)} trigger={null}>
                <div className="demo-logo-vertical" style={{borderRadius:"5px",margin:"10px auto",width:"90%",height:"50px",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:"#3b4c5a",}} >
                    <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.MyRJN8-BzlvGKA5zQxQuvAHaHa?rs=1&pid=ImgDetMain&o=7&rm=3" alt="" style={{width:"30px",height:"30px",borderRadius:"5px"}} />
                    {!collapsed && <span style={{color:"#fff",marginLeft:"8px"}}>后台管理系统</span>}
                    {/* <span style={{color:"#fff",marginLeft:"8px",opacity:collapsed? 0:1}}>后台管理系统</span> */}
                </div>

                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={(e) => {
                    console.log(e.keyPath)
                    const labelPath = e.keyPath.map(key => findLabelByKey(items, key)).filter(Boolean); // 过滤掉找不到的 key
                    // console.log(labelPath.map(label => ({ title: <span><UserOutlined />{label}</span> })));
                    setBreadcrumbItems(labelPath.map(label => ({ title: <span><UserOutlined />{label}</span> })));
                }
                } />
            </Sider>
            {/* 右侧主体 */}
            <Layout>
                {/* 头部隐藏侧边栏 */}
                <Header style={{ padding: "0", width: "100%", background: colorBgContainer, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <Button style={{ fontWeight: 600, margin: "16px" }}>请登录</Button>
                </Header>

                <Content style={{ padding: '0 16px', background: colorBgContainer, width: "100%" }}>
                    {/* 面包屑功能是将侧边栏选中的路径显示在面包屑中，但要实现实时变化而不是写死，则需要获取当前路径，并动态生成面包屑 */}
                    {/* <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: <span><UserOutlined />首页</span> }, { title: <span><UserOutlined />系统首页</span> }]} /> */}
                    <Breadcrumb style={{ margin: '16px 0' }} items={breadcrumbItems.length ? breadcrumbItems : [{ title: <span><UserOutlined />系统首页</span> }]} />

                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                            width: '100%'
                        }}
                    >
                        {/* 搜索框 */}
                        <div className="proHeader" style={{ display: 'flex' }}>
                            <span style={{ fontSize: "18px", fontWeight: 700 }}>商品列表</span>
                            <Input style={{ width: "250px", marginLeft: "50px" }} placeholder="请输入商品名称" />
                            <Button>搜索</Button>
                        </div>
                        {/* 商品各种信息 */}
                        <Table style={{ display: "flex", width: "100%" }} size='large' columns={columns} dataSource={proList} pagination={{ align: "center", pageSize: 4, size: "large", responsive: true, showSizeChanger: [4,10,20,50] }} />
                    </div>
                </Content>
            </Layout>
        </Layout>
    )
};
export default Home;